<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>交易统计</title>
		<!-- <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet"> -->
		<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
		<link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
		
		<link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
		<link href="css/plugins/iCheck/custom.css" rel="stylesheet">
		<link href="css/animate.min.css" rel="stylesheet">
		<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
		<link rel="stylesheet" href="css/cropper.min.css">
		<link rel="stylesheet" href="css/ImgCropping.css">
		<link rel="stylesheet" href="css/newStyle.css">
		<link href="js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
		<style type="text/css">
			/*以下是等待状态的通用样式*/
			.wating_big_div {
				position: absolute;
				top: 0px;
				width: 100%;
				height: 100%;
				display: table;
				z-index: 9999;
			}

			.zhezhao {
				opacity: 0.3;
				position: absolute;
				top: 0px;
				width: 100%;
				height: 100%;
				z-index: 9999;
			}

			.wating_content_div {
				text-align: center;
				background: none;
				display: table-cell;
				vertical-align: middle;
			}

			/*以上是等待状态的通用样式*/
			.yunyingBox {
				width: 118px;
				height: 156px;
				cursor: pointer;
				box-sizing: border-box;
			}

			.yunyingBox:hover {
				border-left: 1px solid rgba(242, 242, 242, 1);
				border-right: 1px solid rgba(242, 242, 242, 1);
				background-color: rgb(243, 243, 243);
				color: #1ABC9C !important;
			}

			.yunyingBox>.imgbox {
				width: 60px;
				height: 60px;
			}

			.orderChg {
				width: 50px;
				cursor: pointer;
				text-align: center;
			}

			.Chg_active {
				color: #1ABC9C;
			}
			.table>tbody>tr>td,.table>tfoot>tr>td, .table>thead>tr>td{
				background-color: #fff;
			}
		</style>
	</head>
	<body class="gray-bg" style="background-color: rgba(249, 249, 249, 1);">
		<div class="w100p" style="display: flex;align-items: center;flex-direction: column;">
			<div class="w100p menu_title dfaic" style="justify-content:space-between;">
				<div class="">
					<div class="ibox-tools cache5" style="margin: 0;margin-left: 30px;">
						交易统计
					</div>
				</div>

				<div class="mr30">
					<button class="refresh_btn">
						<a class="refresh_a" style="">
							<i class="fa fa-refresh"></i> 刷新
						</a>
					</button>
				</div>
			</div>

			<div class="w100p">
				<div class="customBox dfdc customBox_border" style="margin: 20px 30px 0 30px;">
					<div class="customBox_title">
						<div class="customBox_title_text h45px pl20 fz14">
							订单统计
						</div>
					</div>
					<div class="customBox_body dfaic" style="padding: 0;height: 322px;position: relative;">
						<div class="h100p dfaic" style="width: 70%;border-right: 1px solid rgba(228, 228, 228, 1);">
							<table class="table table-bordered mb0 m0a " style="width: 95%;">
								<thead>
									<tr>
										<th>浏览人数</th>
										<th>下单人数</th>
										<th>订单数</th>
										<th>下单件数</th>
										<th>有效订单数</th>
										<th>下单金额</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>100</td>
										<td>100</td>
										<td>100</td>
										<td>100</td>
										<td>100</td>
										<td>100</td>
									</tr>
								</tbody>
								
								<thead>
									<tr>
										<th>退款金额</th>
										<th>付款人数</th>
										<th>付款订单数</th>
										<th>付款件数</th>
										<th>付款金额</th>
										<th>客单价</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>100</td>
										<td>100</td>
										<td>100</td>
										<td>100</td>
										<td>100</td>
										<td>100</td>
									</tr>
								</tbody>
							</table>
						</div>
						
						<div id="main" class="h100p" style="width: 30%;"></div>
						<!-- <div style="position: absolute;right: 0;top:0;width: 200px;height:50px;z-index: 10;">
						<div class="w100p h100p dfaic">
							<div class="h40px ml20 orderChg Chg_active" data-interval="1">今日</div>
							<div class="h40px ml20 orderChg" data-interval="2">本周</div>
							<div class="h40px ml20 orderChg" data-interval="3">本月</div>
							<div class="h34px ml20 time-box">
								<input type="text" class="layer-date get-date pl10" placeholder="YYYY-MM-DD hh:mm:ss"
							      onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" required=""
							      aria-required="true">
								<span>~</span>
								<input type="text" class="layer-date get-date pl10" placeholder="YYYY-MM-DD hh:mm:ss"
								  onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" required=""
								  aria-required="true">
							</div>
						</div>
					</div> -->
					</div>
					
					<div class="dfaic" style="height: 400px;">
						<div id="StackedLineChart" class="h100p" style="width: 100%;"></div>
					</div>
					
					
				</div>
				
			</div>



		</div>
		<!--加载遮罩组件-->
		<div class="none" id="wating_show">
			<div class="ibox wating_big_div">
				<div class="zhezhao bg_f"></div>
				<div class="ibox-content wating_content_div ">
					<div class="spiner-example">
						<div class="sk-spinner sk-spinner-wave">
							<div class="sk-rect1"></div>
							<div class="sk-rect2"></div>
							<div class="sk-rect3"></div>
							<div class="sk-rect4"></div>
							<div class="sk-rect5"></div>
						</div>
						<h5 class="f20 c0"><span id="loading_text">正在请求 ，请稍后...... </span>(<span id="second_span">0</span>)秒</h5>
					</div>
				</div>
			</div>
		</div>
		<div class="dashboard-header animated fadeInRight">

		</div>
	</body>
	<script src="js/jquery.min.js?v=2.1.4"></script>
	<script src="js/bootstrap.min.js?v=3.3.6"></script>
	<script src="js/plugins/peity/jquery.peity.min.js"></script>
	<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
	<script src="js/plugins/layer/laydate/laydate.js"></script>
	<script src="js/content.min.js?v=1.0.0"></script>
	<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			IsTokenSave();
			$(".refresh_a").click(function() { //刷新按钮
				location.reload();
			});

			
			var StackedLineChart = echarts.init(document.getElementById('StackedLineChart'));
			var myChart = echarts.init(document.getElementById('main'));

			$(".orderChg").each(function() {
				$(this).click(function() {
					$(this).siblings().removeClass("Chg_active");
					$(this).addClass("Chg_active");
					var data = $(this)[0].dataset;
					console.log(data.interval)
					if (data.interval == 1) {
						var option = {
							tooltip: {
								trigger: 'axis'
							},
							// 		toolbox: {
							//             show: true,
							//             feature: {
							//                 magicType: {
							//                     type: ['line', 'bar']//切换为折线图，切换为柱状图
							//                 },  
							//             }
							//         },
							xAxis: {
								type: 'category',
								boundaryGap: false, //坐标轴两边是否留白
								data: ['07-01周六', '07-02周日', '07-03周一', '07-04周二', '07-05周三', '07-06周四', '07-07周五']
							},
							yAxis: {
								splitLine: false,
								type: 'value'
							},
							series: [{
								data: [12, 80, 96, 50, 150, 120, 180],
								name: '订单数量',
								type: 'line',
								smooth: true
							}]
						};
						let myChart = echarts.init(document.getElementById('main'));
						myChart.setOption(option, true);
					} else if (data.interval == 2) {
						console.log("123");
						var option = {
							tooltip: {
								trigger: 'axis'
							},
							// 		toolbox: {
							//             show: true,
							//             feature: {
							//                 magicType: {
							//                     type: ['line', 'bar']//切换为折线图，切换为柱状图
							//                 },  
							//             }
							//         },
							xAxis: {
								type: 'category',
								boundaryGap: false, //坐标轴两边是否留白
								data: ['07-07周五', '07-14周五', '07-21周五', '07-28周五', '08-03周五', '08-10周五', '08-17周五']
							},
							yAxis: {
								splitLine: false,
								type: 'value'
							},
							series: [{
								data: [120, 580, 596, 1050, 1150, 920, 1280],
								name: '订单数量',
								type: 'line',
								smooth: true
							}]
						};
						let myChart = echarts.init(document.getElementById('main'));
						myChart.setOption(option, true);
						// myChart.setOption(option);
					} else if (data.interval == 3) {
						var option = {
							tooltip: {
								trigger: 'axis'
							},
							// 		toolbox: {
							//             show: true,
							//             feature: {
							//                 magicType: {
							//                     type: ['line', 'bar']//切换为折线图，切换为柱状图
							//                 },  
							//             }
							//         },
							xAxis: {
								type: 'category',
								boundaryGap: false, //坐标轴两边是否留白
								data: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07']
							},
							yAxis: {
								splitLine: false,
								type: 'value'
							},
							series: [{
								data: [1200, 800, 960, 500, 1500, 1200, 1800],
								name: '订单数量',
								type: 'line',
								smooth: true
							}]
						};
						let myChart = echarts.init(document.getElementById('main'));
						myChart.setOption(option, true);
					}

				})
			})

			option = {
				title: {
					// text: '漏斗图',
					// subtext: '纯属虚构'
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c}%"
				},
				// toolbox: {
				// 	feature: {
				// 		dataView: {
				// 			readOnly: false
				// 		},
				// 		restore: {},
				// 		saveAsImage: {}
				// 	}
				// },
				// legend: {
				// 	data: ['展现', '点击', '访问', '咨询', '订单']
				// },

				series: [{
					name: '漏斗图',
					type: 'funnel',
					left: '-15%',
					top: 60,
					//x2: 80,
					bottom: 60,
					width: '90%',
					// height: {totalHeight} - y - y2,
					min: 0,
					max: 100,
					minSize: '0%',
					maxSize: '100%',
					sort: 'descending',
					gap: 2,
					label: {
						show: true,
						position: 'inside'
					},
					labelLine: {
						length: 10,
						lineStyle: {
							width: 1,
							type: 'solid'
						}
					},
					// labelLine: { // 标签的视觉引导线样式
					// 	normal: {
					// 		show: true, // 是否显示引导线
					// 		length: 30 // 视觉引导线第一段的长度。
					// 	}
					// },
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 1
					},
					emphasis: {
						label: {
							fontSize: 20
						}
					},
					data: [{
							value: 60,
							name: '访问'
						},
						{
							value: 40,
							name: '咨询'
						},
						{
							value: 20,
							name: '订单'
						}
					]
				}]
			};
			
			StackedLineChartOption = {
				legend: {
				        data: ['支付金额', '退款金额', '付款人数', '付款件数', '下单转化率（%）', '付款转化率（%）']
				    },
			    xAxis: {
					axisLabel: {
						rotate: 45
					},
					type: 'category',
					name: '时间',
					boundaryGap: false,
					data: ["2017082812", "2017082813", "2017082814", "2017082814", "2017102814", "2017112814"],
				},
				yAxis: [{
					name: '',
					type: 'value'
				}, {
					name: '转化率（%）',
					type: 'value'
				}],
				series: [
					{
						name: '支付金额',
						type: 'line',
						yAxisIndex: 0,
						data: [64418, 34571, 46592, 36962, 66562, 94711],
					},
					{
						name: '退款金额',
						type: 'line',
						yAxisIndex: 0,
						data: [4183, 5711, 4659, 365, 6659, 945],
					},
					{
						name: '付款人数',
						type: 'line',
						yAxisIndex: 0,
						data: [2001, 5711, 2750, 3605, 4210, 6580],
					},
					{
						name: '付款件数',
						type: 'line',
						yAxisIndex: 0,
						data: [1001, 2711, 1750, 1605, 2210, 1580],
					},
					{
						name: '下单转化率（%）',
						type: 'line',
						yAxisIndex: 1,
						data: [20, 38, 40, 74, 32, 15],
					},
					{
						name: '付款转化率（%）',
						type: 'line',
						yAxisIndex: 1,
						data: [15, 21, 42, 19, 55, 30],
					},
				
				// , {
				// 	name: '视频广告',
				// 	type: 'line',
				// 	data: [644183, 945711, 965962, 365962, 765962, 665962],
				// }, {
				// 	name: '广告',
				// 	type: 'line',
				// 	data: [55096, 127366, 289103, 789103, 489103, 989103],
				// }, {
				// 	name: '搜索引擎',
				// 	type: 'line',
				// 	data: [153222, 121460, 363895, 163895, 263895, 663895],
				// },
				
				],

			};


			StackedLineChart.setOption(StackedLineChartOption);
			myChart.setOption(option);

		});
	</script>
</html>
